<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <div>
        <el-row>
          <el-col :span="5">
            <el-form-item label="标准号:" label-width="70px" prop="number">
              <el-input v-if="isEdit === false" v-model="form.number" type="text" style="width: 90%" />
              <el-input v-if="isEdit === true" v-model="form.number" type="text" style="width: 90%" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="标准名:" label-width="70px" prop="sname">
              <el-input v-model="form.sname" type="text" style="width: 90%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起草单位:" label-width="90px" prop="drdepart">
              <el-input v-model="form.drdepart" type="text" style="width: 90%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类别:" prop="type">
              <el-select v-model="form.type" clearable placeholder="请选择标准类别">
                <el-option v-for="type in types" :key="type" :label="type" :value="type" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发布单位:" label-width="90px" prop="reldpart">
              <el-input v-model="form.reldepart" style="width: 90%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布日期:" label-width="90px" prop="reldate">
              <el-date-picker v-model="form.reldate" type="datetime" format="yyyy-MM-dd" placeholder="请选择发布日期" style="width: 90%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实施日期:" label-width="90px" prop="endate">
              <el-date-picker v-model="form.endate" type="datetime" format="yyyy-MM-dd" placeholder="请选择实施日期" style="width: 90%" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-form-item label="正文:" prop="maintext">
        <div>
          <span class="info-span">
            提示: 为避免站内正文浏览格式错误，可以将正文内容与参考文献一同压缩后上传附件
          </span>
          <Tinymce ref="editor" v-model="form.maintext" />
        </div>
      </el-form-item>

      <el-form-item label="附件:" style="margin-left: 20px; width: 300px">
        <el-upload
          ref="upload"
          :action="'/api/sys/addStandard'"
          :limit="limit"
          :auto-upload="false"
          :data="form"
          :on-success="successSubmit"
          accept=".xls, .xlsx, .zip, .pdf, .doc, .png, .jpeg, .jpg, .txt"
          :headers="headers"
        >
          <el-button
            slot="trigger"
            type="info"
            style="margin-left: 20px"
            size="small"
          >点击上传附件</el-button>
        </el-upload>
      </el-form-item>
      <div>
        <el-button type="primary" style="margin-left: 15px; width: 130px" @click="handleSubmit">提交</el-button>
        <template>
          <el-popconfirm
            confirm-button-text="返回"
            cancel-button-text="再想想"
            title="返回后将清除所有已编辑的内容并返回标准列表，是否返回?"
            @confirm="backtolist()"
          >
            <el-button slot="reference" style="margin-left: 50px; width: 100px">返回</el-button>
          </el-popconfirm>
        </template>
      </div>
    </el-form>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
// import { addStandard } from '@/api/standard'
import { getToken } from '@/utils/auth'
import { searchDetailInfo, updateStandardInfo } from '@/api/standard'

export default {
  name: 'StandardDetail',
  components: { Tinymce },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        number: '', // 标准号
        sname: '', // 标准名
        type: '', // 类型
        reldate: '', // 发布如期
        endate: '', // 实施日期
        reldepart: '', // 发布单位
        drdepart: '', // 起草单位
        maintext: '' // 正文
      },
      uploadForm: {
        type: 'standard',
        id: this.number
      },
      headers: {
        Authentication: getToken()
      },
      limit: 1,
      rules: {
        number: [{ required: true, trigger: 'blur', message: '请输入标准号' }],
        sname: [{ required: true, trigger: 'blur', message: '请输入标准名' }],
        type: [{ required: true, trigger: 'blur', message: '请输入类型' }],
        reldate: [{ required: true, trigger: 'blur', message: '请输入发布日期' }],
        endate: [{ required: true, trigger: 'blur', message: '请输入实施日期' }],
        reldepart: [{ required: true, trigger: 'blur', message: '请输入发布单位' }],
        drdepart: [{ required: true, trigger: 'blur', message: '请输入起草单位' }],
        maintext: [{ required: true, trigger: 'blur', message: '请输入正文内容' }]
      },
      types: ['企业标准', '国家标准', '国家军用标准']
    }
  },
  created() {
    if (this.isEdit) {
      const number = window.localStorage.getItem('number')
      this.fetchData(number)
    }
  },
  methods: {
    fetchData(number) {
      searchDetailInfo(number).then(res => {
        this.form = res.data
      })
    },
    handleSubmit() {
      console.log(this.form.number)
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     addStandard(this.form).then(res => {
      //       this.$refs.upload.submit()
      //       if (res.code === 200) {
      //         this.$message({
      //           message: '新增标准成功',
      //           type: 'success'
      //         })
      //         this.$router.push('/standard/list')
      //       } else {
      //         this.$message.error(res.msg)
      //       }
      //     })
      //   }
      // })
      this.$refs.form.validate(valid => {
        if (valid && this.isEdit === false) {
          this.$refs.upload.submit()
        }
        if (valid && this.isEdit && this.$refs.upload.uploadFiles.length > 0) {
          this.$refs.upload.submit()
        }
        if (valid && this.isEdit && this.$refs.upload.uploadFiles.length === 0) {
          updateStandardInfo(this.form).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '更新行业标准成功',
                type: 'success'
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        }
        this.$router.push('/standard/list')
      })
    },
    successSubmit() {
      if (this.isEdit) {
        this.$message({
          message: '更新行业标准成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '新增行业标准成功',
          type: 'success'
        })
      }
      this.$router.push('/standard/list')
    },
    backtolist() {
      this.$router.push('/standard/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.row-container {
  border: 2px solid #333;
}
.info-span {
  color: rgb(233, 165, 165);
  font-size: 10px;
}
</style>
